<template>
  <div id="app">
    <NavBar v-if="showNavBar" />
    <router-view></router-view>
    <AIChatButton v-if="showChatButton" />
    <BackToTop v-if="showBackToTop" />
  </div>
</template>

<script>
import AIChatButton from '@/components/common/AIChatButton.vue'
import NavBar from '@/components/common/NavBar.vue'
import BackToTop from '@/components/common/BackToTop.vue'

export default {
  name: 'App',
  components: {
    AIChatButton,
    NavBar,
    BackToTop
  },
  computed: {
    // 在AI聊天页面和登录相关页面不显示聊天按钮
    showChatButton() {
      const hiddenPaths = ['/ai-chat', '/login', '/register', '/phone-login', '/forgot-password']
      // 检查路由元信息中是否设置了hideAI属性
      if (this.$route.meta && this.$route.meta.hideAI) {
        return false
      }
      return !hiddenPaths.includes(this.$route.path)
    },
    // 在登录、注册等认证页面以及明确设置hideNav的页面不显示导航栏
    showNavBar() {
      const authPaths = ['/login', '/register', '/phone-login', '/forgot-password', '/phone-reset']
      const token = sessionStorage.getItem('token') || localStorage.getItem('token')
      
      // 检查路由元信息中是否设置了hideNav属性
      if (this.$route.meta && this.$route.meta.hideNav) {
        return false
      }
      
      // 在认证页面不显示导航栏
      if (authPaths.some(path => this.$route.path.startsWith(path))) {
        return false
      }
      
      // 如果没有token，只在认证页面显示导航栏
      if (!token) {
        return false
      }
      
      return true
    },
    // 在登录、注册等认证页面和设置了hideBackToTop的页面不显示返回顶部按钮
    showBackToTop() {
      const authPaths = ['/login', '/register', '/phone-login', '/forgot-password', '/reset-phone']
      // 检查路由元信息中是否设置了hideBackToTop属性
      if (this.$route.meta && this.$route.meta.hideBackToTop) {
        return false
      }
      // 简化判断逻辑
      for (const path of authPaths) {
        if (this.$route.path.includes(path)) {
          return false
        }
      }
      return true
    }
  }
}
</script>

<style>
#app {
  font-family: "Microsoft YaHei", sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

/* 为非聊天页面保留之前的样式 */
.login-container #app,
.register-container #app,
.user-container #app,
.home-container #app {
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
</style>
